<template>
  <div class="top-tab">
    <div class="left">青岛</div>
    <div class="center">
      <van-tabs
        line-width="60px"
        line-height="2px"
        title-active-color="#ef4238"
        :value="active"
        @click="change"
      >
        <van-tab title="正在上映"> </van-tab>
        <van-tab title="即将上映"> </van-tab>
      </van-tabs>
    </div>
    <div class="right">搜索</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";

export default defineComponent({
  props: ["active"],
  setup(props, context) {
    const change = (e: any) => {
      context.emit("update:active", e);
    };
    return { change };
  },
});
</script>

<style lang='scss' scoped>
.top-tab {
  padding: 0 20px;
  position: relative;
  top: 0;
  left: 0;
  z-index: 100;
  background: #fff;
  @include flex(row, space-between, center);

  &.isFixed {
    width: 100%;
    position: fixed;
  }
  .left,
  .right {
    font-size: 14px;
  }
  .center {
    flex: 1;
    margin: 0 15%;
  }
}
</style>
